<script lang="ts" setup name="Cell">
const props = defineProps<{
  row: number
  col: number
  value: number | null
}>()
</script>

<template>
  <div class="cell">
    <div class="span-wrapper">
      <span>{{ value }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.cell {
  width: 114px; 
  height: 114px;
  background-color: #e9c47f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;

  .span-wrapper {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {  
      font-size: 30px;  
    }  
  }
} 
</style>